micro-app 项目结构
micro-app 的官方案例采用了主应用 + 子应用的组织结构：
micro-app-demo/
├── main-app/ # 主应用（端口 3000）
│ ├── src/
│ │ ├── main.ts # 入口文件，注册 micro-app
│ │ ├── App.vue # 主应用布局，加载子应用
│ │ └── config.ts # 子应用地址配置
│ └── package.json
├── child-app-vue2/ # Vue 2 子应用（端口 4001）
├── child-app-vue3/ # Vue 3 子应用（端口 4002）
├── child-app-react/ # React 子应用（端口 4003）
├── child-app-angular/ # Angular 子应用（端口 4004）
└── child-app-sidebar/ # 公共侧边栏子应用
text
主应用监听 3000 端口，只能同时启动一个主应用。子应用端口各不相同，可以同时启动。
主应用接入方式
1. 安装 micro-app
npm install @micro-zoe/micro-app
bash
2. 在入口文件注册
// main.ts
import microApp from '@micro-zoe/micro-app';
import { loadPlugins } from './plugins';
microApp.start({
plugins: {
modules: {
// 解决开发模式下的兼容性问题
'child-vue2': [{ loader: loadPlugins.vue2 }],
'child-vue3': [{ loader: loadPlugins.vue3 }],
}
}
});
typescript
plugins.modules 中的 loader 方法主要用于解决开发环境中不同框架版本的兼容性问题。如果在开发中没有遇到兼容性异常，不需要做这部分配置。
3. 在页面中加载子应用
<!-- App.vue -->
<template>
<div class="main-app">
<child-sidebar />
<div class="content">
<!-- 通过 micro-app 标签加载子应用 -->
<micro-app
name="child-vue3"
:url="config.childVue3Url"
/>
</div>
</div>
</template>
<script setup>
import config from './config';
</script>
vue
4. 子应用地址配置
// config.ts
export default {
childVue2Url: 'http://localhost:4001',
childVue3Url: 'http://localhost:4002',
childReactUrl: 'http://localhost:4003',
childAngularUrl: 'http://localhost:4004',
}
typescript
查找官方案例的方法
micro-app 官方文档中没有提供完整的从零开始的示例，但可以通过以下方式找到案例代码：
- GitHub 官方仓库的 dev 目录 -- 在 micro-app 的 GitHub 组织下有一个专门的 demo 仓库，包含 main-app 和多个 child-app
- GitHub 搜索 -- 搜索
micro-app example可以找到大量社区示例 - Used by 列表 -- 在 micro-app 的 GitHub 主页右侧有 "Used by" 链接，展示使用该框架的开源项目
- Chrome DevTools 插件 -- micro-app 提供了浏览器开发者工具插件
micro-app-devtools，方便调试
micro-app 的核心特性
| 特性 | 说明 |
|---|---|
| JS 沙箱 | 隔离子应用的 JS 执行环境，防止全局污染 |
| 样式隔离 | 防止子应用样式影响主应用和其他子应用 |
| 元素隔离 | 子应用的 DOM 操作不会影响主应用 |
| 资源地址补全 | 自动补全子应用中相对路径的资源地址 |
| 预加载 | 支持在空闲时间预加载子应用资源 |
| 数据通信 | 提供主应用与子应用之间的数据通信机制 |
| 插件系统 | 支持自定义插件扩展功能 |
实际集成注意事项
- 端口冲突 -- 主应用固定 3000 端口，开发时只能启动一个主应用
- 跨域配置 -- 子应用需要配置 CORS，允许主应用跨域加载资源
- 路由冲突 -- 子应用的路由需要与主应用协调，避免冲突
- 公共资源 -- 侧边栏等公共组件可以作为独立子应用，被多个主应用复用
- 开发模式兼容 -- 不同框架版本在开发模式下可能有兼容性问题，需要通过 plugins 配置解决
↑